<template>
  <div class="quick-navigation-list">
    <div
      class="inline-block quick-navigation-item"
      :class="[activeNavigation == navigation.prop ? 'active' : '', navigation.theme]"
      v-for="navigation in quickNavigationList"
      :key="navigation.label"
      @click="navigationClickFn(navigation)"
    >
      <div class="flex items-center quick-navigation-item-label">
        {{ navigation.label }}
        <SvgIcon v-if="navigation.icon" :name="navigation.icon" class="navigation-icon" />
      </div>
      <div class="quick-navigation-item-value">{{ navigation.num }}</div>
      <div class="active-border"></div>
    </div>
  </div>
</template>
<script setup>
  import { ref } from 'vue'
  import { getHrhcStatistics } from '@/api/asset/equipment'
  const emit = defineEmits(['change'])
  // 快捷导航选中
  let activeNavigation = ref('totalCount')
  // 快捷导航
  const quickNavigationList = ref([
    { label: '总计', theme: 'blue', prop: 'totalCount', num: 0 },
    { label: '未发起同步', theme: 'yellow', prop: 'unSyncCount', num: 0, active: true },
    { label: '待修改', theme: 'yellow', prop: 'waitModifyCount', num: 0 },
    { label: '进行中', theme: 'blue', prop: 'syncingCount', num: 0 },
    { label: '备案中或已通过', theme: 'green', prop: 'passCount', num: 0 },
  ])
  const getStNum = () => {
    getHrhcStatistics().then(({ result }) => {
      if (result) {
        quickNavigationList.value.forEach((navigation) => {
          let prop = navigation.prop
          if (prop) {
            navigation.num = result[prop] || 0
          }
        })
      }
    })
  }
  getStNum()

  const navigationClickFn = ({ label, prop }) => {
    activeNavigation.value = prop
    let param = {}

    switch (label) {
      case '总计':
        param = {
          hrhcSyncStatusList: [],
        }
        break
      case '未发起同步':
        param = {
          hrhcSyncStatusList: [0],
        }
        break
      case '待修改':
        param = {
          hrhcSyncStatusList: [20],
        }
        break
      case '进行中':
        param = {
          hrhcSyncStatusList: [10],
        }
        break
      case '备案中或已通过':
        param = {
          hrhcSyncStatusList: [30, 40],
        }
        break
    }
    getStNum()
    emit('change', param)
  }

  const reset = () => {
    activeNavigation.value = 'totalCount'
  }
  const clickActive = ({ label, prop }) => {
    navigationClickFn({ label, prop })
  }
  defineExpose({
    reset,
    getStNum,
    clickActive,
    quickNavigationList,
  })
</script>
<style lang="less" scoped>
  .quick-navigation-list {
    .quick-navigation-item {
      height: 62px;
      border-radius: 2px;
      padding: 9px 0 9px 16px;
      margin-right: 20px;
      margin-bottom: 20px;
      color: #ffffff;
      cursor: pointer;
      position: relative;
      &:hover {
        transform: scale(1.1);
        transition: transform 0.3s;
        z-index: 999;
      }
      @media screen and(min-width: 1000px) {
        width: calc(100% / 7 - 17.2px);
        &:nth-of-type(6n) {
          margin-right: 20px;
        }
        &:nth-of-type(7n) {
          margin-right: 0;
        }
      }
      @media screen and(min-width: 1440px) {
        width: calc(100% / 8 - 17.5px);
        &:nth-of-type(7n) {
          margin-right: 20px;
        }
        &:nth-of-type(8n) {
          margin-right: 0;
        }
      }
      .quick-navigation-item-label {
        font-size: 12px;
        line-height: 17px;
      }
      .quick-navigation-item-value {
        height: 28px;
        line-height: 28px;
        font-size: 20px;
        font-weight: 600;
      }
      .active-border {
        height: 6px;
        width: 100%;
        position: absolute;
        left: 0;
        bottom: 0;
        display: none;
        border-radius: 0 0 2px 2px;
      }
    }
    .quick-navigation-item.blue {
      background-color: #95b4fcff;
      .active-border {
        background-color: #5786f3ff;
      }
    }
    .quick-navigation-item.red {
      background-color: #f76964ff;
      .active-border {
        background-color: #e23838ff;
      }
    }
    .quick-navigation-item.yellow {
      background-color: #fab855ff;
      .active-border {
        background-color: #f79a29ff;
      }
    }
    .quick-navigation-item.green {
      background-color: #70d6a1ff;
      .active-border {
        background-color: #33b571ff;
      }
    }
    .quick-navigation-item.active {
      box-shadow: 0 4px 5px rgb(5 19 56 / 20%);
      .active-border {
        display: block;
      }
    }
  }
  .navigation-icon {
    width: 14px;
    height: 14px;
    margin-left: 5px;
  }
</style>
